var ProOrderTemplate = function () {
  var template = /* html */ `
    <div class="pro-order-template" v-loading.fullscreen.lock="loading">
      <template v-if="templateConfig!==null">
        <form-group group-title="分类仓设置">
          <div class="order-material-type-setting" v-for="config in templateConfig.materialTypeConfig" :key="config.field">
            <div class="title">{{i18n.getMsg('templateSetting.proOrder.type.'+config.field)}}</div>
            <div class="setting-item">
              <label>宽度</label>
              <el-input-number class="setting-input" v-model="config.width" size="small" :min="1" controls-position="right" :precision="0">
              </el-input-number>
            </div>
            <div class="setting-item">
              <label>对齐方式</label>
              <el-select class="setting-input" v-model="config.align" size="small">
                <el-option v-for="alignText in alignList" :key="alignText.value" :value="alignText.value" :label="alignText.label">
                </el-option>
              </el-select>
            </div>
            <div class="setting-item" v-if="config.canUpdate">
              <label>是否隐藏</label>
              <el-radio-group v-model="config.hidden" size="small">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </div>
          </div>
        </form-group>
        <div style="text-align:center;margin-top:15px;">
          <el-button size="medium" type="primary" @click="save">保存</el-button>
        </div>
      </template>
    </div>
  `;

  return {
    data: function () {
      return {
        loading: false,
        templateConfig: null,
        alignList: i18n.getDropDown('templateSetting.proOrder.align', ['left', 'center', 'right']),
        i18n: i18n
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.initData().then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      initData: function () {
        var self = this;
        return ajaxRequest('printTemplate/getCommonOrderTemplates', {
          type: 'orderCreate',
          name: '制单模板'
        }).then(function (templates) {
          var templateConfig = new ProOrderTemplateConfig(templates);
          self.templateConfig = templateConfig;
          return templateConfig;
        });
      },

      save: function () {
        var templateConfig = this.templateConfig;
        var code = templateConfig.checkValid();
        if (code !== '') {
          var name = i18n.getMsg('templateSetting.proOrder.type.' + code);
          this.$alert(`${name}的宽度未设置`, '信息');
          return;
        }

        var config = templateConfig.getObject();
        this.loading = true;
        var self = this;
        ajaxRequest('printTemplate/saveCommonOrderTemplate', {
          type: 'orderCreate',
          name: '制单模板',
          template: JSON.stringify(config)
        }).then(function (msg) {
          self.loading = false;
          self.$alert(msg, '信息');
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      FormGroup: FormGroup
    },

    template: template
  };
}();
